<template>
  <UseFullscreen v-slot="{ toggle }" style="height: inherit">
    <div ref="editorRef" class="monaco-container">
      <Tooltip  
        :title="getTitle"
        placement="bottom"
        :mouseEnterDelay="0.5"
        class="full-screen"
      >
        <span @click="handleToggle(toggle)">
          <FullscreenOutlined
            :style="{
              color: '#fff',
              fontSize: '20px',
            }"
            v-if="!isFullscreen"
          />
          <FullscreenExitOutlined
            :style="{
              color: '#fff',
              fontSize: '20px',
            }"
            v-else
          />
        </span>
      </Tooltip>
    </div>
  </UseFullscreen>
</template>

<script setup lang="ts">
import * as monaco from 'monaco-editor';
import { onMounted, onUnmounted, ref, watch, unref, computed } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { UseFullscreen } from '@vueuse/components';
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
} from '@ant-design/icons-vue';
import { useI18n } from '@/hooks/web/useI18n';
// import { language } from 'monaco-editor/esm/vs/basic-languages/java/java'

const { t } = useI18n();
const emit = defineEmits(['update:modelValue', 'update:value', 'change']);
let editor: monaco.editor.IStandaloneCodeEditor;

interface IProps {
  value: string;
  disabled?: boolean;
  language: string;
  readonly: boolean;
  // 自动格式化
  autoFormat: boolean;
}
const editorRef = ref();
const isFullscreen = ref(false);

const props = withDefaults(defineProps<IProps>(), {
  value: '',
  disabled: false,
  language: 'javascript',
  readonly: false,
  autoFormat: false,
});

const getTitle = computed(() => {
  return unref(isFullscreen)
    ? t('layout.header.tooltipExitFull')
    : t('layout.header.tooltipEntryFull');
});
const handleToggle = (toggle) => {
  toggle();
  isFullscreen.value = !isFullscreen.value;
};
let languageList = ref([
  'javascript',
  'json',
  'sql',
  'java',
  'groovy',
  'shell',
  'python',
]);
onMounted(() => {
  init();
});
/**销毁实例 */
const onDispose = () => {
  editor && editor.dispose();
};
onUnmounted(() => {
  onDispose();
});

const format = () => {
  if (editor) {
    const range = editor.getModel()?.getFullModelRange();
    editor.getAction('editor.action.formatDocument')?.run(range);
  }
};
const init = () => {
  isFullscreen.value = false;
  console.log(props.language, 'lan')
  onDispose();
  // 使用 - 创建 editor 对象
  editor = monaco.editor.create(editorRef.value, {
    theme: 'vs-dark',
    language: props.language,
    renderLineHighlight: 'gutter',
    folding: true, // 是否折叠
    roundedSelection: false,
    foldingHighlight: true, // 折叠等高线
    foldingStrategy: 'indentation', // 折叠方式  auto | indentation
    showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
    disableLayerHinting: true, // 等宽优化
    emptySelectionClipboard: false, // 空选择剪切板
    selectionClipboard: false, // 选择剪切板
    automaticLayout: true, // 自动布局
    codeLens: true, // 代码镜头
    scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
    colorDecorators: true, // 颜色装饰器
    accessibilitySupport: 'on', // 辅助功能支持  "auto" | "off" | "on"
    lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
    lineNumbersMinChars: 5, // 行号最小字符   number
    readOnly: props.readonly, //是否只读  取值 true | false
  });
  editor.setValue(props.value as string);
  debugger
  if (props.autoFormat) {
    setTimeout(() => format(), 200);
  }
  editor.onDidChangeModelContent &&
    editor.onDidChangeModelContent(() => {
      const value = editor.getValue();
      emit('update:value', editor.getValue());
      emit('change', value);
    });
};

watch(
  () => props.value,
  (val) => {
    const cValue = editor.getValue();
    if (cValue != val) editor.setValue && editor.setValue(val || '');
  },
);
defineExpose({
  format,
});
</script>
<style lang="less" scoped>
.monaco-container {
  position: relative;
  height: 100%;
  .full-screen {
    position: absolute;
    right: 15px;
    top: 6px;
    z-index: 11;
  }
}
</style>
